<template>
	<view class="bg" style="padding-bottom: 118rpx">
		<view>
			<!-- 头部 -->
			<!-- <view class="image-wrap"> -->
			<image :src="info.image" class="collectImg" mode="aspectFill"></image>
			<!-- </view> -->

			<view class="topWrap white">
				<view class="plr-20 mt-30">
					<view class="size-36 mb-22">
						{{ info.name }}
					</view>
					<view class="flex flex-start size-22 mb-20">
						<view class="tipsLeft bg-gold color-1a mr-10 ptb-7 plr-10 radius-6">
							{{ info.goods_category_name }}
						</view>
						<view class="flex flex-start  mr-10">
							<view class="tipsLeft bg-gold color-1a plr-10 ptb-7" style="border-radius:6rpx 0 0 6rpx;">
								限量{{info.stock}}份
							</view>
							<view class="tipsRight gold ptb-7 plr-10" style="border-radius:0 6rpx 6rpx 0">
								第{{info.number_f}}份
							</view>
						</view>
						<view class="tipsRight gold ptb-7 red plr-10 radius-6" v-if="info.label">
							{{ info.label }}
						</view>
					</view>
					<view class="gold size-50 bold mb-20 flex flex-between ">
						<text>￥{{ info.price }}</text>
						<!-- <button class="more" @tap="showMoreFn()">
							<text>全部编号</text>
							<image src="../../static/go.png" mode=""></image>
						</button> -->
					</view>
					<view class="flex flex-between size-24 white">
						<!-- <view class="white size-24"> 创作者 </view> -->

						<view class="flex flex-center">
							<image :src="info.author_image" mode="aspectFill" class="userImg flex-shrink mr-20"></image>
							<!-- <view class="white size-24"> 创作者 </view> -->
							<!-- <view class="color-c mt-10 white size-24"> -->
							{{ info.author_name }}
							<!-- </view> -->
						</view>
					</view>
				</view>
			</view>

			<view class="plr-20">
				<view style="background: #fff" class="radius-8">
					<!-- 介绍 -->
					<view class="plr-20 size-24 gray-2 authCon pb-10 pt-20 mt-30 mb-20">
						<view class="flex mb-30">
							<view class="white">合约地址</view>
							<!-- @click="copyAddress(info.contract)" -->
							<view class="flex" style="width: 70%">
								<view class="text-right white bold text-ellipsis" style="width: 100%">
									{{ info.contract }}
								</view>
								<!-- <image class="copyImg ml-20" src="../../static/copy.png" mode=""></image> -->
							</view>
						</view>
						<!-- <view class="flex mb-30">
				  <view class=""> 认证标识 </view>
				  <view class="flex" style="width: 70%" @click="copyAddress(info.meta_data)">
					<view class="rightText bold text-ellipsis" style="width: 90%">
					  {{ info.meta_data }}
					</view>
					<image class="copyImg ml-20" src="../../static/copy.png" mode=""></image>
				  </view>
				</view>
				<view class="flex mb-30">
				  <view class=""> 认证标准 </view>
				  <view class="flex">
					<view class="red bold">
					  {{ info.attribute }}
					</view>
				  </view>
				</view> -->
						<view class="flex mb-20">
							<view class="white">认证网络</view>
							<view class="flex">
								<view class="white bold">
									{{ info.network_name }}
								</view>
							</view>
						</view>
						<!-- <view class="flex mb-30">
				  <view class="">发行方</view>
				  <view class="flex">
					<view class="red bold">
					  {{ info.issuer }}
					</view>
				  </view>
				</view> -->
					</view>
				</view>
			</view>
			<view class="warn">
				<view class="warn-title">风险提示：</view>
				<view class="warn-text">
					数字藏品为虚拟商品，而非实物，仅限于经实名认证为年满18周岁的中国大陆用户购买。数字藏品的版权由发行方或原创者拥有，除另外取得版权拥有者书面同意外，用户不得将数字藏品用于任何商业用途。本商品一经出售，不支持退换。请勿对数字藏品进行炒作、场外交易，欺诈，或以任何其他非法方式进行使用。
				</view>
			</view>
			<!-- 介绍 -->
			<view class="plr-20" v-if="info.content">
				<view class="radius-16 ptb-30">
					<view class="mb-30 size-32 white"> 作品故事 </view>
					<view class="white infoWrap" v-html="info.content"> </view>
				</view>
			</view>

		</view>
		<view class="btmWrap flex flex-between plr-30">
			<view class="gold size-50 bold">
				￥{{ info.price }}
			</view>
			<view class="">
				<button v-if="info.status == 3" class="mtb-30 buyBtn" hover-class="none">锁单中</button>
				<button v-else class="mtb-30 buyBtn" hover-class="none" :disabled="btnDisabled"
					@click="toBuy">立即购买</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				btnDisabled: false,
				users_goods_id: '',
				info: {},

				showMore: false,
				query: {
					// categoryId: 0,
					goodsId: 0,
					search: '',
					time_order: '',
					price_order: 1,
					page: 1,
					pagesize: 20,
				},
				// 用户商品列表
				list: [],
				listLoading: false,
				listNoMore: false,
				// 全部编号列表 - 位置id
				listScrollId: '',
			}
		},
		onLoad(options) {
			this.users_goods_id = options.users_goods_id || 0;
			this.query.goodsId = options.goodsId || 0;
			if (this.query.goodsId > 0) {
				this.moreList();
			}
		},
		methods: {
			// 全部编号列表打开后，设置列表滚动的位置
			moreWindowOpen() {
				setTimeout(() => {
					this.listScrollId = 'item_' + this.users_goods_id;
				}, 30);
			},
			// 获取页面详情数据
			getDetail() {
				this.$http('api/trade/goodsDetail', {
					users_goods_id: this.users_goods_id,
				}).then(res => {
					this.info = res;
				}).catch((msg) => {

				});
			},

			// 全部编号列表请求
			moreList() {
				if (this.listNoMore || this.listLoading) return;
				this.listLoading = true;
				uni.showLoading({
					mask: true,
				});
				this.$http('api/trade/tradeGoodsList', this.query).then(res => {
						let data = res.data;
						this.list = this.query.page === 1 ? data : [...this.list, ...data];
						if (this.query.page === 1 && !this.info.users_goods_id) {
							if (this.users_goods_id > 0) {
								this.getDetail();
							} else if (data.length > 0) {
								this.users_goods_id = data[0].users_goods_id;
								this.getDetail();
							} else {
								uni.showModal({
									title: '提示',
									content: '该藏品已退市',
									confirmText: '返回',
									showCancel: false,
									success: () => {
										uni.navigateBack({
											delta: 1,
										});
									},
								});
							}
						}
						if (data.length < this.query.pagesize) {
							this.listNoMore = true;
						} else {
							this.query.page += 1;
						}
					})
					.catch(() => this.listNoMore = true)
					.finally(() => {
						this.listLoading = false;
						uni.hideLoading();
					});
			},
			// handleBack() {
			// 	if (getCurrentPages().length === 1) {
			// 		uni.switchTab({
			// 			url: '/pages/home/index',
			// 		})
			// 	} else {
			// 		uni.navigateBack()
			// 	}
			// },
			toBuy() {
				this.btnDisabled = true
				this.$http('api/orders/tradeGoods', {
					users_goods_id: this.users_goods_id,
				}).then(res => {
					this.btnDisabled = false
					uni.navigateTo({
						url: '../pay/collectPay?order_id=' + res.order_id,
					})
				})
			},
		},
	}
</script>

<style lang="less">
	.show-price-body .uni-scroll-view-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
</style>
<style lang="less" scoped>
	.warn {
		// width: 686rpx;
		margin: 40rpx 16rpx 0;
		background: #fff;
		border-radius: 10px;
		padding: 30rpx 20rpx;

		.warn-title {
			font-size: 28rpx;
			color: red;
		}

		.warn-text {
			margin-top: 28rpx;
			font-size: 24rpx;
			color: #A8ABB8;
			line-height: 38rpx;
		}
	}

	page {
		background: #f5f5f5;
	}

	.white {
		color: #3c3c3c;
	}

	.gold {
		color: #9c8b66;
	}

	.back {
		position: relative;
		height: 0;

		image {
			position: absolute;
			width: 20rpx;
			height: 36rpx;
			top: 30rpx;
			left: 30rpx;
			z-index: 99;
		}
	}

	.collectImg {
		width: 100%;
		height: 450rpx;
	}

	.userImg {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	.buyBtn {
		color: #FFFFFF;
		width: 240rpx;
		height: 78rpx;
		font-size: 30rpx;
		line-height: 78rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		background: linear-gradient(90deg, #EEA634, #DE2D32);
		border-radius: 39rpx;

		&::after {
			border: none;
		}
	}

	.copyImg {
		width: 24rpx;
		height: 24rpx;
		filter: brightness(0.5);
	}

	.btmWrap {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 10;
		background: #fff;
		height: 118rpx;

		.button {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 68rpx;
			border-radius: 34rpx;
			font-size: 24rpx;
			padding: 0 34rpx;
			line-height: 34rpx;
		}
	}

	// .collectImg {
	//   width: 342rpx;
	//   display: block;
	//   margin: 0 auto 340rpx;
	//   height: 323rpx;
	// }

	.tipsRight {
		background: #fff;
	}

	.topWrap {
		// padding-top: 180rpx;
		// background: url(../../static/detailsBg-2.png) 0 0 no-repeat;
		// background-size: 100% 100%;
		// width: 600rpx;
		// margin: 0 auto -70rpx;
		// height: 404rpx;
	}

	.infoWrap {
		/deep/ img {
			width: 100% !important;
			height: auto;
		}
	}

	.more {
		font-size: 28rpx;
		color: #9c8b66;
		display: flex;
		align-items: center;
		margin: 0;
		border: none;
		background: none;
		filter: brightness(0.1);

		&::after {
			display: none;
		}

		image {
			width: 24rpx;
			height: 24rpx;
			margin-left: 5rpx;
			// filter: brightness(0.6);
		}
	}



	.show-price-box {
		background-color: #f5f5f5;
		z-index: 100;
		overflow: hidden;

		.show-price-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			height: 100rpx;
			background-color: #fff;

			text {
				font-size: 40rpx;
				font-weight: bold;
				color: #3c3c3c;
			}

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.sort-type {
			display: flex;
			background-color: #fff;
			padding: 10rpx 20rpx;

			button {
				border: none;
				border-radius: 0;
				line-height: 50rpx;
				height: 50rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				background: none;
				color: #666666;
				font-weight: bold;
			}

			button.active {
				background: #ffffff;
				color: #000000;
			}

			button::after {
				display: none;
			}
		}

		.sort {
			display: flex;
			// align-items: center;
			margin-left: 10rpx;
			justify-content: flex-start;

			image {
				width: 16rpx;
				height: 24rpx;
				margin-left: 10rpx;
			}

			&+.sort {
				margin-left: 40rpx;
			}
		}

		.show-price-body {
			width: 100%;
			height: calc(100vh - 400rpx);
			box-sizing: border-box;
			padding: 0 40rpx;
			background-color: #f5f5f5;

			.show-price-item {
				display: flex;
				align-items: center;
				padding: 20rpx 16rpx;
				margin: 20rpx 0;
				background-color: #fff;
				border-radius: 10rpx;

				.img {
					width: 180rpx;
					height: 180rpx;
					border-radius: 8rpx 0 0 8rpx;
				}

				.title {
					font-size: 30rpx;
					font-weight: bold;
					color: #1a1a1a;
					display: flex;
					align-items: center;
				}

				.item-id {
					font-size: 24rpx;

					text {
						font-weight: bold;
					}
				}

				.right {
					flex: 1;
					height: 180rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 20rpx;
					position: relative;

					.item-price {
						font-size: 32rpx;
						display: flex;
						justify-content: space-between;

						&>text:first-child {
							font-size: 34rpx;
							font-weight: bold;
						}

						.item-price-right {
							text {
								padding: 5rpx 10rpx;
								font-size: 24rpx;
								border-radius: 5rpx;
								margin-left: 10rpx;
								background-color: rgba(255, 16, 241, 0.1);
								color: rgba(209, 13, 200, 1.0);
								font-weight: bold;
							}

							.collect-pay-status {
								background-color: rgba(255, 16, 241, 0.1);
								color: rgba(209, 13, 200, 1.0);
							}
						}
					}
				}

				.item-price {
					font-size: 34rpx;
				}

				.right-icon {
					margin-left: auto;
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}
</style>
